<template>
	<view class="content-header">
		<view class="top20"></view>
		<view class="address">
			<view class="address-top">
				<view class="flex-row flex-content-between ones">
					<view>持卡人姓名</view>
					<input class="input" v-model="form.userName" placeholder="请输入姓名" placeholder-class="input-p"/>
				</view>
				<view class="flex-row flex-content-between ones">
					<view>证件类型</view>
					<view class="flex-row flex-item-center">
						<picker class="pick" mode="selector" :range="typeList" @change="changeType">
							<view :class="form.id_type?`detal-body-se`:``">{{form.id_type?form.id_type:"请选择"}}</view>
						</picker>
						<image class="you-img" src="../../static/index/you.png" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="flex-row flex-content-between ones">
					<view>证件号码</view>
					<input class="input" v-model="form.number" placeholder="请输入证件号码" placeholder-class="input-p"/>
				</view>
				<view class="flex-row flex-content-between ones" v-if="type==1">
					<view>信用卡有效期</view>
					<view class="flex-row flex-item-center">
						<view>
							<picker class="pick" mode="date" @change="changeDate" fields="month">
								<view :class="form.expiration_date?`detal-body-se`:``">{{form.expiration_date?form.expiration_date:"请选择"}}</view>
							</picker>
						</view>
						<image class="you-img" src="../../static/index/you.png" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="flex-row flex-content-between ones" v-if="type==1">
					<view>cvn码(安全码)</view>
					<view class="flex-row flex-item-center">
						<input class="input" v-model="form.cvn" placeholder="请输入cvn吗" placeholder-class="input-p"/>
					</view>
				</view>
				<view class="flex-row flex-content-between ones">
					<view>{{type==0?`储蓄卡号`:`信用卡号`}}</view>
					<input class="input" v-model="form.bankNumber" placeholder="请输入卡号" placeholder-class="input-p"/>
				</view>
				<view class="flex-row flex-content-between ones">
					<view>银行签约手机号</view>
					<input class="input" v-model="form.mobile" placeholder="请输入签约手机号码" placeholder-class="input-p"/>
				</view>
			</view>
		</view>
		<mu-suspension bottom="46">
			<view class="flex-row">
				<view class="foot">确认修改</view>
			</view>
		</mu-suspension>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				type:0,
				typeList:[
					"身份证",
					"三证合一"
				],
				form:{
					userName:"",
					number:"",
					bankNumber:"",
					mobile:"",
					cvn:"",
					expiration_date:"",
					id_type:"",
				}
			}
		},
		onLoad(opt) {
			if(opt.type){
				this.type = opt.type
			}
			if(opt.title){
				uni.setNavigationBarTitle({
					title:opt.title
				})
			}
		},
		methods:{
			//修改证件类型
			changeType(e){
				// console.log(e);
				var typeList = this.typeList;
				var index = e.detail.value;
				// console.log(typeList[index]);
				this.form.id_type = typeList[index]
			},
			//修改日期
			changeDate(e){
				console.log(e);
				var value = e.detail.value
				this.form.expiration_date = value;
			}
		}
	}
</script>

<style lang="scss">
	.foot{
		width: 400rpx;
		height: 90rpx;
		background: linear-gradient(90deg, #71DA38 0%, #50BC16 100%);
		border-radius: 45rpx 45rpx 45rpx 45rpx;
		opacity: 1;
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 90rpx;
		margin-left: 175rpx;
	}
	.input{
		text-align: end;
	}
	.pick{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.you-img{
		width: 14rpx;
		height: 24rpx;
		margin-left: 10rpx;
	}
	.detal-body-se{
		color: #333333 !important;
	}
	.input-p{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		text-align: end;
	}
	.ones{
		margin-bottom: 70rpx;
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
		>view:nth-child(2){
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}
	.address-top{
		padding-top: 50rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	.address{
		width: 750rpx;
		height: calc(100vh - 115rpx);
		background: #FFFFFF;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
	}
</style>